<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<title>立即购买</title>
		<link rel="stylesheet" th:href="@{/static/before/css/style.css}" />

	</head>

	<body>
		<!--header-->
		<div th:insert="before/header :: header"></div>
		<div th:insert="before/header02 :: header02"></div>

		<!-- xiangqing -->
		<form action="post" method="">
			<div class="xiangqing">
				<div class="neirong w">
					<div class="xiaomi6 fl">小米6</div>
					<nav class="fr">
						<li>
							<a href="">概述</a>
						</li>
						<li>|</li>
						<li>
							<a href="img-list.html">参数</a>
						</li>
						<li>|</li>
						<li>
							<a href="show-comments.html">查看评价</a>
						</li>
						<div class="clear"></div>
					</nav>
					<div class="clear"></div>
				</div>
			</div>

			<div class="jieshao mt20 w">	
				<!--轮播-->
				<div class="left fl">
					<div class="box">
						<div class="box-1">
							<ul>
								<li>
									<img src="image/liebiao_xiaomi5.jpg" alt="这里是第一场图片" />

								</li>
								<li>
									<img src="image/liebiao_hongmin4x.jpg" alt="这里是第二张图片" />

								</li>
								<li>
									<img src="image/liebiao_xiaomi5.jpg" alt="这里是第三张图片" />

								</li>
								<li>
									<img src="image/liebiao_hongmin4x.jpg" alt="这里是第一场图片" />

								</li>
								<li>
									<img src="image/liebiao_xiaomi5.jpg" alt="这里是第一场图片" />

								</li>
							</ul>
						</div>
						<div class="box-2">
							<ul>
							</ul>
						</div>
						<div class="box-3">
							<span class="prev"> < </span>
							<span class="next"> > </span>
						</div>
					</div>
				</div>
				
				

				<div class="right fr">
					<div class="h3 ml20 mt20">小米6</div>
					<div class="jianjie mr40 ml20 mt10">变焦双摄，4 轴防抖 / 骁龙835 旗舰处理器，6GB 大内存，最大可选128GB 闪存 / 5.15" 护眼屏 / 四曲面玻璃/陶瓷机身</div>
					<div class="jiage ml20 mt10">2499.00元</div>
					<div class="ft20 ml20 mt20">选择版本</div>
					<div class="xzbb ml20 mt10">
						<div class="banben fl">
							<a>
								<span>全网通版 6GB+64GB</span>
								<span>2499元</span>
							</a>
						</div>
						<div class="banben fr">
							<a>
								<span>全网通版 6GB+128GB</span>
								<span>2899元</span>
							</a>
						</div>
						<div class="clear"></div>
					</div>
					<div class="ft20 ml20 mt20">选择颜色</div>
					<div class="xzbb ml20 mt10">
						<div class="banben">
							<a>
								<span class="yuandian"></span>
								<span class="yanse">亮黑色</span>
							</a>
						</div>

					</div>
					<div class="xqxq mt20 ml20">
						<div class="top1 mt10">
							<div class="left1 fl"> 小米6 全网通版 6GB内存 64GB 亮黑色</div>
							<div class="right1 fr">2499.00元</div>
							<div class="clear"></div>
						</div>
						<div class="bot mt20 ft20 ftbc">总计：2499元</div>
					</div>
					<div class="xiadan ml20 mt20">
						<input class="jrgwc" type="button" name="jrgwc" value="立即选购" />
						<input class="jrgwc" type="button" name="jrgwc" value="加入购物车" />

					</div>
				</div>
				<div class="clear">
				</div>
			</div>
		</form>
		<!--footer-->
		<div th:insert="before/footer :: footer"></div>
	</body>

</html>
<script type="text/javascript">
	window.onload = function() {
		function $(param) {
			if(arguments[1] == true) {
				return document.querySelectorAll(param);
			} else {
				return document.querySelector(param);
			}
		}
		var $box = $(".box");
		var $box1 = $(".box-1 ul li", true);
		var $box2 = $(".box-2 ul");
		var $box3 = $(".box-3");
		var $length = $box1.length;

		var str = "";
		for(var i = 0; i < $length; i++) {
			if(i == 0) {
				str += "<li class='on'>" + (i + 1) + "</li>";
			} else {
				str += "<li>" + (i + 1) + "</li>";
			}
		}
		$box2.innerHTML = str;

		var current = 0;

		var timer;
		timer = setInterval(go, 1000);

		function go() {
			for(var j = 0; j < $length; j++) {
				$box1[j].style.display = "none";
				$box2.children[j].className = "";
			}
			if($length == current) {
				current = 0;
			}
			$box1[current].style.display = "block";
			$box2.children[current].className = "on";
			current++;
		}

		for(var k = 0; k < $length; k++) {
			$box1[k].onmouseover = function() {
				clearInterval(timer);
			}
		}
		for(var p = 0; p < $box3.children.length; p++) {
			$box3.children[p].onmouseover = function() {
				clearInterval(timer);
			};
		}

		for(var u = 0; u < $length; u++) {
			$box2.children[u].index = u;
			$box2.children[u].onmouseover = function() {
				clearInterval(timer);
				for(var j = 0; j < $length; j++) {
					$box1[j].style.display = "none";
					$box2.children[j].className = "";
				}
				this.className = "on";
				$box1[this.index].style.display = "block";
				current = this.index + 1;
			}

		}

		$box3.children[0].onclick = function() {
			back();
		}
		$box3.children[1].onclick = function() {
			go();
		}

		function back() {
			for(var j = 0; j < $length; j++) {
				$box1[j].style.display = "none";
				$box2.children[j].className = "";
			}
			if(current == 0) {
				current = $length;
			}
			$box1[current - 1].style.display = "block";
			$box2.children[current - 1].className = "on";
			current--;
		}
	}
</script>